<template>
	<view>
		
		<!-- 头部设置 -->
		<view class="cu-custom" :style="[{height: (isBottom ? (CustomBar * 2) : CustomBar) + 'rpx'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'', bgColor]">
				<view class="action text-left">
					<text @tap="BackPage" v-if="isBack" class="cuIcon-back text-white"></text>
					<view @tap="BackPage" v-if="isBack" class="text-white">
						<slot name="backText"></slot>
					</view>
					<view v-if="!isBack">
						<slot name="backText"></slot>
					</view>
				</view>
				<view class="content text-white" :style="[{top:StatusBar + 'rpx'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
			<view v-if="isBottom" class="cu-bar fixed fixed-bottom" :class="bgColor" :style="style + 'top:' + CustomBar + 'rpx;'">
				<slot name="bottom"></slot>
			</view>
		</view>
		<!-- 头部设置 -->

		
	</view>
	
</template>

<script>
	export default {
		name: 'head-navigation',
		data() {
			return {
				isHomeBack: this.HomeBackUrl
			};
		},
		onReady: function(res) {
			// #ifdef MP-ALIPAY
			this.isHomeBack = '';
			// #endif
		},
		onLoad: function (options) {
			let _this = this;
		},
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var bgColor = this.bgColor;
				
				var style = `height:${CustomBar}rpx;`;
				if (this.bgImage) {
					style = `height:${CustomBar}rpx;background-image:url(${bgImage});`;
				}
				if (this.bgColor) {
					style = `height:${CustomBar}rpx;background-color:${bgColor};`;
				}
				return style
			}
		},
		props: {
			
			CustomBar: {
				type: String,
				// #ifdef H5 
				default: '80', 
				// #endif
				// #ifdef MP-WEIXIN
				default: '100',
				// #endif
				// #ifdef MP-ALIPAY
				default: '120',
				// #endif
				// #ifdef APP-PLUS 
				default: '120'
				// #endif
			},
			
			StatusBar: {
				type: String,
				// #ifdef H5 
				default: '0', 
				// #endif
				// #ifdef MP-WEIXIN
				default: '60',
				// #endif
				// #ifdef MP-ALIPAY
				default: '60',
				// #endif
				// #ifdef APP-PLUS
				default: '60'
				// #endif
			},

			bgColor: {
				type: [String], 
				default: 'bg-yellow',
			},
			
			isBack: {
				type: [Boolean, String], 
				default: false,
			},
			
			isBottom: {
				type: [Boolean, String], 
				default: false,
			},
			
			bgImage: {
				type: String,
				default: '',
			},
			
			HomeBackUrl: {
				type: String,
				default: '',
			}
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			HomePage() {
				let _this = this;
				uni.redirectTo({
					url: _this.HomeBackUrl
				});
			},
			
		}
	}
</script>

<style>
	.cu-custom .cu-bar.fixed-bottom {
		display: block;
		padding: 20rpx 0 0 0;
	}
</style>
